<template>
  <van-nav-bar title="分销信息" left-text="" left-arrow @click-left="goBack" />
  <div class="box">
    <div class="poster">
      <Qrcode :value="imgSrc" size="400" level="H"></Qrcode>
    </div>

    <van-cell-group inset class="link">
      <van-field v-model="url" placeholder="普通输入框" readonly id="url"/>
      <van-button type="primary" id="btn" @click="copy">点击复制</van-button>
    </van-cell-group>

    <div class="update">
      <van-button type="success" @click="onSubmit">重新生成海报</van-button>
    </div>
  </div>
  <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue'
import Qrcode from '@/components/retail/Qrcode.vue';
import { showFailToast } from 'vant';
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/business/index') }
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))

const url = ref('')
const imgSrc = ref('')


onBeforeMount(() => {
  getRecordData()
})
const getRecordData = async () => {
  let result = await Api.Poster({busid: LoginUser.id})
  if (result.code == 1) {
    url.value=result.data.url
    imgSrc.value='http://localhost:5173/#'+result.data.poster
    console.log(imgSrc.value);
    console.log(result.data.url);
  }
}

// 复制链接
const copy=()=>{
  navigator.clipboard.writeText(url.value).then(() => {
    showSuccessToast('复制成功');
  }, (err) => {
    showErrorToast('复制失败: ' + err);
  });
}

// 重新生成海报
const onSubmit = async ()=>{
  let res=await Api.PosterReset({busid: LoginUser.id,url:url.value})
  if (res.code == 1) {
    showSuccessToast({
        message: res.msg
    })
    getRecordData()
  }else{
    showFailToast('更新海报失败')
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 95vh;
  background-color: #eeeeee;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.poster{
  margin-top: 3vh;
}
.link{
  width: 85%;
  display: flex;
  box-sizing: border-box;
  margin: 1rem;
}
.link #url{
  width: 70%;
  overflow: hidden;
}
.link #btn{
  width: 30%;
}
</style>